/**
 * Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout.
 * You can view component api by:
 * https://github.com/ant-design/ant-design-pro-layout
 */
import ProLayout, { PageContainer } from '@ant-design/pro-layout';
import React, { useEffect, useRef } from 'react';
import { Link, useIntl, connect } from 'umi';
import { Auth, RightContent } from '@/components';
import logo from '../assets/logo.svg';
import appInit from '@/micro/index'


const BasicLayout = props => {
  const {
    dispatch,
    children,
    settings,
    location = {
      pathname: '/',
    },
    menuTreeData,
    menuListData
  } = props;

  const rootSlave = useRef();

  const handleMenuCollapse = payload => {
    if (dispatch) {
      dispatch({
        type: 'global/changeLayoutCollapsed',
        payload,
      });
    }
  };

  useEffect(() => {
    console.log("menuListData",)
    appInit({
      el: rootSlave.current,
      apps: menuListData.map(item => {
        const { path } = item;
        return { ...item }
      })
    });
  }, [rootSlave]);

  const { formatMessage } = useIntl();

  return (
    <ProLayout
      logo={logo}
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || !menuItemProps.path) {
          return defaultDom;
        }
        return <Link to={menuItemProps.path}>{defaultDom}</Link>;
      }}
      route={() => menuTreeData.filter(el => el.parentId === 0)}
      menuDataRender={() => {
        return menuTreeData.filter(el => el.parentId === 0);
      }}
      breadcrumbRender={(routers = []) => {
        console.log("routers", routers)
        return [
          {
            path: '/',
            breadcrumbName: formatMessage({
              id: 'menu.home',
            }),
          },
          ...routers,
        ]
      }}
      disableContentMargin
      layout="top"
      rightContentRender={() => <RightContent />}
    >
      <Auth pathname={location.pathname}>
        <PageContainer title={false} ghost={false} >
          <div ref={rootSlave}>{children}</div>
        </PageContainer>
      </Auth>
    </ProLayout>


    // <ProLayout
    //   logo={logo}
    //   formatMessage={formatMessage}
    //   onCollapse={handleMenuCollapse}
    //   menuItemRender={(menuItemProps, defaultDom) => {
    //     if (menuItemProps.isUrl || !menuItemProps.path) {
    //       return defaultDom;
    //     }

    //     return <Link to={menuItemProps.path}>{defaultDom}</Link>;
    //   }}
    //   breadcrumbRender={(routers = []) => {
    //     console.log("routers", routers)
    //     return [
    //       {
    //         path: '/',
    //         breadcrumbName: formatMessage({
    //           id: 'menu.home',
    //         }),
    //       },
    //       ...routers,
    //     ]
    //   }}

    //   menuDataRender={() => {
    //     return menuTreeData;
    //   }}
    //   rightContentRender={() => <RightContent />}
    //   {...props}
    //   {...settings}
    // >
    //   <Auth pathname={location.pathname}>
    //     <PageContainer title={false} ghost={false} >
    //       {children}
    //       <div id="root-slave"></div>
    //     </PageContainer>
    //   </Auth>
    // </ProLayout>
  );
};

export default connect(({ global, settings, menu }) => ({
  collapsed: global.collapsed,
  settings,
  menuTreeData: menu.menuTreeData,
  menuListData: menu.menuListData,
}))(BasicLayout);
